<template>
  <div class="container">
    <el-form
      label-width="80px"
      :rules="updateSubjectsFromRules"
      :model="updateSubjectsFrom"
      ref="updateSubjectsFromRef"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="updateSubjectsFrom.subjectName"></el-input>
      </el-form-item>

      <el-form-item label="是否显示">
        <el-switch v-model="isTrue" @change="change"></el-switch>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close', false)">取 消</el-button>
      <el-button type="primary" @click="updateSubjects('updateSubjectsFromRef')"
        >确 定</el-button
      >
    </span>
  </div>
</template>

<script>
// 导入 api
import { update } from '@/api/hmmm/subjects'
export default {
  name: 'subjects-update',
  components: {},
  props: {
    data: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      isTrue: !!this.data.isFrontDisplay,

      updateSubjectsFrom: {
        subjectName: this.data.subjectName
      },

      updateSubjectsFromRules: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 修改学科
    updateSubjects () {
      this.$refs.updateSubjectsFromRef.validate(async (valid) => {
        if (valid) {
          try {
            this.data.subjectName = this.updateSubjectsFrom.subjectName
            await update(this.data)
            this.$emit('close', false)
            this.$emit('update')
            this.$message.success('修改成功')
          } catch (error) {
            this.$message('修改失败')
          }
        } else {
          console.log('未通过')
        }
      })
    },
    change () {
      if (this.data.isFrontDisplay === 1) {
        this.data.isFrontDisplay = 0
      } else {
        this.data.isFrontDisplay = 1
      }
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
